<template>
	<view class="wrap" @tap.stop="onWrap()">
		<u-navbar title="道具详情" :bgColor="'rgba(255,255,255,0)'" height="44" :placeholder="true" :autoBack="true">
		</u-navbar>
		<view style="width: 90%; margin: 10rpx auto 0;">
			<view style="box-shadow: 2rpx 2rpx 60rpx 4rpx #cad0d6">
				<view class="propCont" v-if="JSON.stringify(datas) !== '{}'">
					<view class="activated">
						<image class="activateds" src="/static/ble/activated.png" mode=""></image>
						<!-- <image class="closes" src="" mode=""></image> -->
					</view>
					<view class="jxz">
						<u--image class="jxzImg" src="/static/ble/pageImg/highTemperatures.png" width="270rpx"
							height="320rpx"></u--image>
						<view class="font">
							{{datas.name}}#{{datas.number}}
						</view>
					</view>
					<view class="rectangle">
						<view class="bckText">
							{{datas.grade.name}}
							<!-- {{datas.grade.name || ''}} -->
						</view>
						<view class="bckText">
							<view class="">
								<view class="texts" v-if="nowTimes < datas.expiration_time">
									{{times.startTime}}/{{datas.grade.expiration_time}}天
								</view>
								<!-- <text></text> -->
								<text v-else>已过期</text>
							</view>
							<view class="bubble"
								v-if="((percentage == 50) || (times.startTime <= 7 && times.startTime >= 0)) && bubbleType">
								<view class="bubbles">
									<view class="bubbleFont" v-if="times.startTime > 0">
										<text v-if="percentage == 50">{{times.startTime}}</text>
										<text
											v-else-if="(times.startTime <= 7 && times.startTime > 0)">{{times.startTime}}</text>天后将失效，赶快续期吧
									</view>
									<view class="bubbleFont" v-else-if="times.startTime <= 0">
										已失效，续期后可使用喔
									</view>
								</view>
								<view class="bubbleConts"></view>
							</view>
						</view>
						<view class="bckText textImgs">
							<u--image class="jxzImg" src="/static/ble/vitality.png" width="30rpx" height="30rpx">
							</u--image>
							<text>{{datas.scoreSum | format('eng')}}</text>
						</view>
					</view>
					<view class="progress" v-if="datas.currently_level_info">
						<u-line-progress height="20"
							:percentage="Math.round(datas.experience / datas.currently_level_info.experience * 10000) / 100.00"
							:showText="false" :activeColor="'linear-gradient(90deg, #89D1F5 0%, #C4EFFA 100%)'" />
						<view class="progressName" v-if="!datas.max">
							经验值 {{datas.experience}}/{{datas.currently_level_info.experience}}
						</view>
						<view class="progressName" v-else>
							等级已满
						</view>
					</view>
					<!-- <view class="progress">
						<u-line-progress height="20" :percentage="100" :showText="false"
							:activeColor="'linear-gradient(90deg, #89D1F5 0%, #C4EFFA 100%)'" />
						<view class="progressName">
							铸造次数  2/7
						</view>
					</view> -->
					<view class="cont__attribute">
						<view class="cont__attributeFont">
							道具属性
						</view>
						<view class="attributeList">
							<view class="lists" v-for="(item, index) in list" :key="index"
								@click="onListClick(item, index)">
								<view class="images">
									<image :src="item.img" mode=""></image>
									<view class="imgIcon" v-if="index == 3 && durablePercentage <= 50">
										<u-icon name="error-circle-fill" color="#F00" size="12"></u-icon>
									</view>
									<!-- <u--image :src="item.img" width="46rpx" height="46rpx"></u--image> -->
								</view>
								<view class="fonts" :style="index == 3 && durablePercentage <= 50 ? 'color:#F00;' : ''">
									{{item.text}}{{item.num}}
								</view>
							</view>
						</view>
					</view>
					<view class="cont__casting">
						<view class="cont__attributeFont">
							铸造主体
						</view>
						<view class="cont__bcks">
							<view class="topFont">
								本道具为创世铸造
							</view>
							<view class="bottomFont">
								无铸造主体 极其稀有
							</view>
						</view>
					</view>
				</view>

			</view>
		</view>
		<view class="tabbars">
			<view class="tabbarsList" v-for="(item, index) in list1" :key="item.id" @tap="onClick(item,index)">
				<image :style="" :src="item.showType ? item.urlOpenImg : item.urlCloseImg" mode=""></image>
				<view class="tabbarText">
					{{item.text}}
				</view>
			</view>
		</view>
		<example-popup ref="examplePopups" v-if="!!~datas" :id="propId" :datasIn="datas"
			@showTypeFalse="onShowTypeFalse" @closeSuccess="onCloseSuccess" @cancel="onCancel()" @success="onSuccess()"
			@prompt="onPromptFun" @close="onCloseSuccess"></example-popup>
		<u-loading-page style="z-index: 100;" :loading="loadingType" bgColor="#01D2D3" loadingColor="#01D2D3"
			loading-text=""></u-loading-page>
		<u-popup ref="promptBox" :show="promptBox" overlayOpacity="0.8" round="20" mode="center"
			:closeOnClickOverlay="false">
			<view class="promptBox">   
				<view class="promptText">
					<view class="text">
						{{popupObj.textOne}}
					</view>
					<view class="texts">
						{{popupObj.textTwo}} <text v-if="popupObj.tipstype" @click="onGotoRenew()">请点击续期</text>
					</view>
				</view>
				<view class="tipText" v-if="popupObj.stateType == 2">
					注：道具失效依旧可以正常艾灸实体硬件
				</view>
				<view class="btns">
					<view class="btns__one" @tap="onPopupLeftBtn()">
						{{popupObj.stateType == 1 ? '继续艾灸':'下次艾灸'}}
					</view>
					<!-- <view class="btns__two" @click="onGotoIn()" v-if="popupObj.stateType == 1">
						立即续期
					</view>
					<view class="btns__two" @click="onGotoRenew()" v-else-if="popupObj.stateType == 2 || popupObj.stateType == 3">
						立即续期
					</view> -->
					<view class="btns__two" @click="onGotoRenew()">
						立即续期
					</view>
				</view>

				<!-- <view class="notes" v-if="popupObj.stateType == 1">
					注：能量每6小时刷新补充1/4
				</view> -->
			</view>
		</u-popup>
		<!-- 元气硬件引导 -->
		<animation-rule ref="animationRule"></animation-rule>
	</view>
</template>

<script>
	import examplePopup from '@/pages/town/components/examplePopup.vue';
	import {
		detailsr
	} from '@/api/bluetooth.js'
	import {
		special_effects_check
	} from '@/api/collection.js'
	import {
		propProperties,
		propTypeList
	} from '@/pages/town/common/command.js';
	import animationRule from '../components/animationRule.vue'
	export default {
		components: {
			examplePopup,
			animationRule
		},
		data() {
			return {
				loadingType: true,
				datas: {},
				list: propProperties,
				list1: propTypeList,
				propId: 1,
				types: '',
				times: {
					startTime: '',
					endTime: '',
					beOverdue: '' //是否过期
				},
				nowTimes: '', //当前时间
				durablePercentage: 0, //耐久百分比
				promptBox: false,
				popupObj: { //提示框
					textOne: '', //第一排字
					textTwo: '', //第二排字
					tipstype: false, //是否展示提示文字
					stateType: 0, //1为能量耗尽  2为时间过期 3时间过期无法维修
				},
				bubbleType: true, //气泡状态
				percentage: 0, //天数百分比

			}
		},
		computed: {},
		onHide() {},
		onUnload() {},
		onLoad(e) {
			if (e.id || e.type) {
				this.propId = e.id
				this.types = e.type
			}
			// #ifdef APP-PLUS
			var page = this.$mp.page.$getAppWebview();
			page.setStyle({
				popGesture: 'none'
			});
			// #endif
			// this.onDetails();
			this.dataInfo()
		},
		onReady() {
			// this.$refs.examplePopups.onSwitch(2, 'open')
			this.onUpdateAnimation();
		},
		methods: {
			//用户提示框左按钮
			onPopupLeftBtn() {
				switch (this.popupObj.stateType) {
					case 1:
						this.onGotoIn();
						break;
					case 2:
					case 3:
						this.promptBox = false;
						this.list1[0].showType = false;
						this.list1[1].showType = false;
						break;
				}
				
			},
			//用户点击单选按钮回调
			onPromptFun(id) {
				switch (id) {
					case 1:
						this.$refs.examplePopups.onClose();
						break;
					default:
						break;
				}
			},
			//动画引导
			async onUpdateAnimation() {
				// this.$refs.animationRule.onOpen();
				let distinguish = 'propDetailsPage'
				try {
					const res = await special_effects_check({
						distinguish: distinguish
					})
					let data = res.data.data;
					let arr = Object.values(data)
					arr.forEach((item, index) => {
						switch (item) {
							case 'town_prop_details':
								let animationName = item
								this.$refs.animationRule.onOpen(distinguish, animationName);
								break;
							default:
								break;
						}
					})
				} catch (e) {
					console.log(e)
				}
			},
			//点击关闭气泡
			onWrap() {
				this.bubbleType = false
				this.$forceUpdate()
				console.log(1111, this.bubbleType)
			},
			//耐久值不足左按钮
			onCancel() {
				this.$refs.examplePopups.onSwitch(9, 'close')
			},
			//耐久值不足右按钮
			onSuccess() {
				this.$refs.examplePopups.onSwitch(9, 'close')
				this.$refs.examplePopups.onSwitch(7, 'open')
			},
			//耐久值不足点击提示弹框
			onListClick(item, index) {
				if (index == 3 && this.durablePercentage <= 50) {
					let valueOne, valueTwo;
					if (this.durablePercentage <= 20) {
						valueOne = '20%';
						valueTwo = '10%'
					} else if (this.durablePercentage <= 50) {
						valueOne = '50%';
						valueTwo = '90%'
					}
					let tipsFont = {
						textOne: '后面再说',
						textTwo: '立即维修'
					}
					this.$refs.examplePopups.onTipsrunt(true, `此道具当前耐久已低于最大值${valueOne}`, `使用获取元气数量降低至${valueTwo}`,
						tipsFont, '耐久不足 请尽早前往维修')
				}
			},
			//若进入页面是维修状态则直接显示维修弹框
			async dataInfo() {
				await this.onDetails()
				this.types == 2 ? this.onClick({id:3}) : ''
			},
			//获取详情
			async onDetails() {
				try {
					var detailsrs = await detailsr({
						hardware_id: this.propId
					})
					this.datas = detailsrs.data
					this.durablePercentage = Math.round(Number(this.datas.durable) / Number(this.datas.max_durable) *
						10000) / 100.00
					this.nowTimes = Math.ceil(new Date().getTime() / 1000);
					this.times.startTime = Math.ceil((this.datas.expiration_time - this.nowTimes) / (3600 * 24));
					this.percentage = Math.round(Number(this.times.startTime) / Number(this.datas.grade
						.expiration_time) * 10000) / 100.00;
					this.list.forEach((item, index) => {
						switch (index) {
							case 0:
								this.list[index].num = this.datas.efficiency
								break;
							case 1:
								this.list[index].num = this.datas.lucky
								break;
							case 2:
								this.list[index].num = this.datas.cozy
								break;
							case 3:
								this.list[index].num = this.datas.durable
								break;
							default:
								break;
						}
					})
					this.loadingType = false
				} catch (e) {
					this.$refs.examplePopups.onPrompt(true, '提示', e.message, '', 1, 'propDetails');
				}
			},
			onShowTypeFalse() {
				for (let i = 0; i < this.list1.length; i++) {
					this.list1[i].showType = false
				}
			},
			//多选弹框点击回调
			onCloseSuccess() {
				this.onShowTypeFalse();
				this.loadingType = true
				this.onDetails()
			},
			//点击续期
			onGotoRenew() {
				this.promptBox = false
				this.list1[0].showType = false
				this.list1[1].showType = false
				// uni.showToast({
				// 	title:'暂未开放，敬请期待~',
				// 	duration:3000,
				// 	icon:'none'
				// })
				// return false
				if (!uni.getStorageSync('renewalTypeState')) {
					this.$refs.examplePopups.onPopup()
					return;
				}
				this.$refs.examplePopups.onExtranetPage()
			},
			//前往按摩使用
			onGotoIn() {
				this.promptBox = false
				this.list1[1].showType = false
				// uni.navigateTo({
				// 	url:`/pages/town/example/components?id=${this.propId}`
				// })
				uni.navigateTo({
					url: `/pages/town/ready?id=${this.propId}&backType=2`
				})
			},
			//底部tabbar点击
			async onClick(item, index) {
				switch (item.id) {
					case 1:
						uni.showToast({
							title: '即将上线，尽请期待~',
							duration: 3000,
							icon: 'none'
						})
						return false

						this.list1[index].showType = true
						if (this.nowTimes > this.datas.expiration_time) {
							await this.onStateType(3)
						}
						this.$refs.examplePopups.onChange({
							value: 0.01
						})
						this.$refs.examplePopups.onSwitch(7, 'open');

						// this.datas.upgrade_level_info ?
						// 	this.$refs.examplePopups.onSwitch(4, 'open') :
						// 	this.$refs.examplePopups.onPrompt(true, '提示', '您的道具等级已满', '无法继续升级', 1, 'propDetails');
						break;
					case 2:
						this.list1[index].showType = true
						let nowTimes = Math.ceil(new Date().getTime() / 1000)
						if (nowTimes > this.datas.expiration_time) {
							// await this.onStateType(1)
							await this.onStateType(2)
						} else if (!this.datas.current_power) {
							await this.onStateType(1)
						}
						this.list1[index].showType = false
						this.onGotoIn()
						// console.log(111, this.datas)
						// this.datas.current_power ?
						// this.onGotoIn()
						// :
						// this.promptBox = true;
						break;
					case 3:
						// uni.showToast({
						// 	title:'即将上线，尽请期待~',
						// 	duration:3000,
						// 	icon:'none'
						// })
						// return false

						let type = 2
						if (type == 1) {
							// if (this.times.startTime == this.datas.grade.expiration_time) {
							// 	this.$refs.examplePopups.onPrompt(true, '提示', '维修天数已满', '无法维修', 1, 'propDetails')
							// } else {
							//---
							if (this.nowTimes > this.datas.expiration_time) {
								await this.onStateType(3)
							}
							this.$refs.examplePopups.onChange({
								value: 0.01
							})
							this.$refs.examplePopups.onSwitch(7, 'open');
							//---
							// }
						} else {
							this.$refs.examplePopups.onSwitch(13, 'open');
						}

						break;

					default:
						break;
				}
			},
			onStateType(state) {
				return new Promise(resolve => {
					this.popupObj.stateType = state
					let textOne, textTwo;
					console.log(112, this.popupObj.stateType)
					switch (this.popupObj.stateType) {
						case 1:
							textOne = '您的能量已耗尽'
							textTwo = '继续使用只获得经验值 不再获得元气'
							this.popupObj.tipstype = false
							break;
						case 2:
							textOne = '此道具已过期 无法连接使用获得元气'
							textTwo = '若想继续获得元气'
							this.popupObj.tipstype = true
							break;
						case 3:
							textOne = '此道具已过期 无法维修'
							textTwo = '若想继续维修'
							this.popupObj.tipstype = true
							break;
						default:
							break;
					}
					this.popupObj.textOne = textOne
					this.popupObj.textTwo = textTwo
					this.promptBox = true
					return false
					resolve()
				})
			},
		}
	}
</script>
<style>
</style>
<style>
	page,
	body {
		background: url('/static/ble/pageImg/bg.png') no-repeat center center fixed;
		background-size: cover;
		box-sizing: border-box;
	}
</style>
<style lang="scss" scoped>
	.wrap {
		padding-bottom: 180rpx;
	}

	.promptBox {
		padding: 38rpx 18rpx 20rpx;
		width: 600rpx;
		margin: auto;

		.titles {
			font-size: 32rpx;
			font-weight: 700;
			text-align: center;
			margin-bottom: 32rpx;
		}

		.promptText {
			font-size: 28rpx;
			text-align: center;
			margin-bottom: 30rpx;

			.text {
				margin-bottom: 10rpx;
			}

			text {
				font-size: 30rpx;
				font-weight: 700;
				margin-left: 20rpx;
			}
		}

		.tipText {
			margin-bottom: 42rpx;
			text-align: center;
			font-size: 22rpx;
			color: #a2a2a2;
		}

		.btns {
			text-align: center;
			border-radius: 100rpx;
			margin: 0 auto 20px;
			display: flex;
			justify-content: space-around;
			align-items: center;
			font-size: 28rpx;

			&__one {
				background: #f7f7f7;
				color: #8e8e8e;
				border-radius: 50rpx;
				width: 40%;
				padding: 20rpx 0;
			}

			&__two {
				background: #5EB2FF;
				color: #FFFFFF;
				border-radius: 50rpx;
				width: 40%;
				padding: 20rpx 0;
			}
		}

		.notes {
			text-align: center;
			font-size: 28rpx;
			color: #b1b1b1;
		}
	}

	.tabbars {
		display: flex;
		align-items: center;
		justify-content: space-around;
		width: 100%;
		/* margin: 22px auto; */
		position: fixed;
		bottom: 0;
		background: #dfe7f2;
		// padding: 24rpx 0;
		height: 160rpx;

		.tabbarsList {
			text-align: center;

			image {
				width: 44rpx;
				height: 48rpx;
			}

			.tabbarText {
				font-size: 20rpx;
				color: #a2a2a2;
			}

			.tabbarText-active {
				color: #5CC9FF !important;
			}
		}
	}

	.propCont {
		box-shadow: inset 2rpx 2rpx 64rpx 40rpx #e4ebf3;
		border-radius: 20rpx;
		padding: 1rpx 60rpx 60rpx;
		margin: 0 auto;
		position: relative;

		.activated {
			.activateds {
				width: 96rpx;
				height: 96rpx;
				position: absolute;
				left: 4rpx;
				top: 4rpx;
			}
		}

		.jxz {
			text-align: center;
			margin-bottom: 30rpx;

			.jxzImg {
				margin-top: 72rpx;
				display: flex;
				align-items: center;
				margin-bottom: 32rpx;
			}

			.font {
				font-size: 36rpx;
				color: #000000;
			}
		}

		.rectangle {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-bottom: 40rpx;
			position: relative;

			.textImgs {
				display: flex;
				align-items: center;
				justify-content: center;

				text {
					margin-left: 10rpx;
				}
			}

			.bckText {
				border-radius: 100rpx;
				padding: 16rpx 0rpx;
				font-size: 24rpx;
				text-align: center;
				width: 160rpx;
				background: linear-gradient(180deg, #daedfb 0%, rgba(149, 199, 255, 0) 48%, #daedfb 100%);

				.texts {
					width: 100%;
				}

				.bubble {
					position: absolute;
					width: 100%;
					display: flex;
					align-items: center;
					justify-content: center;
					top: -20rpx;
					right: 0px;
					left: 0px;
					margin: 0 auto;

					.bubbles {
						position: absolute;
						border-radius: 50rpx;
						background: #363642;
						padding: 12rpx 27rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						z-index: 2;

						.bubbleFont {
							font-size: 22rpx;
							color: #fff;
						}
					}

					.bubbleConts {
						width: 40rpx;
						height: 40rpx;
						background: #363642;
						transform: rotate(45deg);
						position: absolute;
						z-index: 1;
						top: -8rpx;
					}
				}
			}
		}

		// .progress:first-child{
		// 	margin-bottom: 24rpx;
		// }
		.progress {
			position: relative;
			margin-bottom: 52rpx;
			border: 2rpx solid #ffff;
			border-radius: 40rpx;

			.progressName {
				position: absolute;
				font-size: 20rpx;
				color: #000000;
				left: 0;
				right: 0;
				top: 0;
				bottom: 0;
				display: flex;
				justify-content: center;
				align-items: center;
			}
		}

		.cont {
			&__attributeFont {
				font-size: 32rpx;
				margin-bottom: 28rpx;
				text-align: center;
			}

			&__attribute {
				.attributeList {
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin-bottom: 52rpx;

					.lists {
						.images {
							display: flex;
							justify-content: center;
							margin-bottom: 16rpx;
							position: relative;

							image {
								width: 46rpx;
								height: 46rpx;
							}

							.imgIcon {
								position: absolute;
								right: 0;
							}
						}

						.fonts {
							font-size: 20rpx;
						}
					}
				}
			}

			&__bcks {
				background: linear-gradient(180deg, #dbe9f5 0%, #dae3ee 48%, #dbe9f5 100%);
				border-radius: 16rpx;
				width: 100%;
				padding: 60rpx 0;
				font-size: 26rpx;
				color: #a2a2a2;
				text-align: center;

				.topFont {
					margin-bottom: 32rpx;
				}
			}
		}
	}
</style>
